<template>
  <div class="app-container">
    <el-form
      style="margin: 15px 80px;"
      :rules="rules"
      ref="formInline"
      :model="formInline"
      :inline="true"
      class="demo-form-inline demo-ruleForm"
    >
      <el-form-item label="归属系统" prop="systemCode">
        <el-select v-model="formInline.systemCode" placeholder="归属系统">
          <el-option label="user-用户管理系统" value="user"></el-option>
          <el-option label="sales-销售管理系统" value="sales"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="selectRole('formInline')">查询</el-button>
        <el-button type="primary" @click="addRole">新增角色</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border style="width: 80%">
      <el-table-column fixed prop="id" label="ID" width="60"></el-table-column>
      <el-table-column prop="roleName" label="角色名称" width="200"></el-table-column>
      <el-table-column prop="roleDesc" label="角色描述" width="200"></el-table-column>
      <el-table-column prop="systemCode" label="归属系统" width="100"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="170"></el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      style="margin: 15px;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 50]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>

    <el-dialog title="新增角色" :visible.sync="centerDialogVisible" width="330px" center>
      当前系统码：{{formInline.systemCode}}
      <br />
      <el-form :inline="true" :model="addData" class="demo-form-inline">
        <el-form-item label="角色名称">
          <el-input v-model="addData.name"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input type="textarea" v-model="addData.desc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">新 增</el-button>
      </span>
    </el-dialog>
    <el-dialog title="编辑角色" :visible.sync="editDialog" width="330px" center>
      当前系统码：{{formInline.systemCode}}
      <br />
      <el-form :inline="true" :model="editData" class="demo-form-inline">
        <el-form-item label="角色名称">
          <el-input v-model="editData.name"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input type="textarea" v-model="editData.desc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialog = false">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addRole, getRoleList, updateRole } from "@/api/user";

export default {
  data() {
    return {
      tableData: [],
      page: 1,
      size: 10,
      total: 0,
      formInline: {
        systemCode: "user"
      },
      rules: {
        systemCode: [
          { required: true, message: "请选择系统", trigger: "change" }
        ]
      },
      centerDialogVisible: false,
      editDialog: false,
      addData: { name: "", desc: "" },
      editData: { id: 0, name: "", desc: "" }
    };
  },
  mounted() {
    getRoleList(this.formInline.systemCode, this.page, this.size).then(res => {
      this.page = res.page;
      this.size = res.size;
      this.total = res.count;
      this.tableData = res.data;
    });
  },
  methods: {
    selectRole(formInline) {
      this.$refs[formInline].validate(valid => {
        if (valid) {
          getRoleList(this.formInline.systemCode, this.page, this.size).then(
            res => {
              this.page = res.page;
              this.size = res.size;
              this.total = res.count;
              this.tableData = res.data;
            }
          );
        } else {
          this.$message({
            message: "请选择一个系统查询",
            type: "warning"
          });
        }
      });
    },
    handleClick(row) {
      this.editData = { id: row.id, name: row.roleName, desc: row.roleDesc };
      this.editDialog = true;
    },
    handleSizeChange(val) {
      getRoleList(this.formInline.systemCode, this.page, val).then(res => {
        this.page = res.page;
        this.size = res.size;
        this.total = res.count;
        this.tableData = res.data;
      });
    },
    handleCurrentChange(val) {
      getRoleList(this.formInline.systemCode, val, this.size).then(res => {
        this.page = res.page;
        this.size = res.size;
        this.total = res.count;
        this.tableData = res.data;
      });
    },
    addRole() {
      this.centerDialogVisible = true;
    },
    add() {
      addRole({
        systemCode: this.formInline.systemCode,
        roleName: this.addData.name,
        roleDesc: this.addData.desc
      }).then(res => {
        this.$message({
          message: res.message,
          type: "success"
        });
        this.selectRole("formInline");
        this.centerDialogVisible = false;
      });
    },
    save() {
      updateRole({
        id: this.editData.id,
        systemCode: this.formInline.systemCode,
        roleName: this.editData.name,
        roleDesc: this.editData.desc
      }).then(res => {
        this.$message({
          message: res.message,
          type: "success"
        });
        this.selectRole("formInline");
        this.editDialog = false;
      });
    }
  }
};
</script>

